<script setup lang="ts">
import { ref, watch } from 'vue'
import type { ArticleItem, ArticleResData } from '../types/data';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useChannelStore }from '@/stores/channel'
const channelStore = useChannelStore()
const router = useRouter()

const props = defineProps<{
  channelId: number;
}>()
console.log("这里是文章列表组件",  props.channelId)

const articleList = ref<ArticleItem[]>([])


watch(
  () => props.channelId,
  async () => {
    console.log("这里是文章列表组件", props.channelId)
    const res = await axios.get<ArticleResData>(
      `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          channel_id: props.channelId,
          timestamp: Date.now(),
        }
      }
    )
    articleList.value = res.data.data.results
  },
  { immediate: true }
)

const goToDetial = (id: number) => {
  router.push({
    name: 'articledetail',
    query: { id }
  })
}

</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="i in 2" :key="i"  @click="goToDetial(i)">
      <p class="title">迪桑娜开发就加快速度的教案设计顶课了撒建档立channel中取出来的值{{ channelStore.channelId }}</p>
      <img class="img" src="https://yanxuan-item.nosdn.127.net/7afec01ce36598c7d22173b6c0e7fcf6.jpg" alt="">
      <img class="img" src="https://yanxuan-item.nosdn.127.net/7afec01ce36598c7d22173b6c0e7fcf6.jpg" alt="">
      <img class="img" src="https://yanxuan-item.nosdn.127.net/7afec01ce36598c7d22173b6c0e7fcf6.jpg" alt="">
      <div class="info">
        <span>小兵张嘎</span>
        <span>17评论</span>
        <span>1天前</span>
      </div>
    </div>
    <div class="article-item" v-for="item in articleList" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
        <template v-if="item.cover.type>0">
          <img
          class="img"
          v-for="it, index in item.cover.images"
          :src="it" alt="" :key="index">
        </template>

      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
